<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="demo">
			<div v-bind:class="{ active: isActive ,'text-danger':hasError}">test</div>
			<!-- 直接绑定对象 -->
			<div v-bind:class="classObject">test22</div>
			<!-- 计算属性返回对象 -->
			<div v-bind:class="comuptedObj">test33</div>
			<!-- 数组对象语法 -->
			<div v-bind:class="[{active:isActive},{'text-danger':hasError}]">test44</div>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#demo",
				data: {
					isActive: true,
					hasError: true,
					classObject: {
						active: true,
						'text-danger': true
					}
				},
				computed: {
					comuptedObj(){
						return {
							active:this.isActive&&!this.hasError,
							'text-danger':this.hasError
						}
					}
				},
			})
		</script>
		<style type="text/css">
			.active {
				font-weight: bold;
			}

			.text-danger {
				color: red;
			}
		</style>

	</body>
</html>
